<template>
  <div class="number_box" >
    <div class="left">
        <el-input 
        size="mini" 
        type="number"
        v-model="value"
        @change="handleChange"
        @input="handleInput"
        @keydown.native="clearInput"
        />
    </div>
    <div class="line"></div>
    <div class="right">
        <div class="up_control" @click="add">
            <div class="up_triangle"></div>
        </div>
        <div class="down_control" @click="substract">
            <div class="down_triangle" ></div>
        </div>
    </div>
  </div>
</template>

<script>
export default {
    name:'NumberInput',
    model: {
        prop: 'count', // 默认是value
        event: 'change', // 默认是input
    },
    props:{
        count:{
            type:Number,
            required:true,
        },
        maxCount:{
            type:Number,
            required:true,

        },
        minCount:{
            type:Number,
            required:true,
        }
    },
    data(){
        return {
            value:0,
            initCount:0,
        } 
    },
    computed:{
        
    },
    methods:{

        add(){
            // this.maxCount=1000 //test
            // console.log('maxCount',this.maxCount)
            if(this.value >= this.maxCount){
                this.$emit("onLimit",'MAX')
                return
            } 
            this.value += 1
            this.$emit('change',this.value)
        },

        substract(){
            // console.log('minCount',this.minCount)
            if(this.value <= this.minCount || this.value <= 0 ){
                 this.$emit("onLimit",'MIN')
                return
            }
            this.value -=1
            this.$emit('change',this.value)
        },
        // 数字框禁止“e,-,+”的输入
        clearInput(e){
            // console.log('e.key',e.key,e)
            if(e.key === 'e' || e.key === 'E' || e.key === "+" || e.key === "-"){
                e.returnValue = false
                return false
            }
        },
        // 处理数字格式
        handleInput(val){
            console.log('val',val,Number(val))

            this.value = Number(val)
            if(val === ''){
                this.value = 0
                return
            }
            const valArr = val.split('')
            if(valArr.length > 1 && valArr[0] === '0' ){
                valArr.shift()
                const newVal = valArr.join('')
                this.value = Number(newVal)
            }
            // 若输入了小数点
            if(valArr.includes('.')){
                const noPointArr = val.split('.')
                this.value = Number(noPointArr[0])
            }
        },
        handleChange(){
            this.$emit('change',Number(this.value))   
        }
    },
    mounted(){
        this.value=this.count
    },

}
</script>

<style lang="scss" scoped>
.number_box{
    width: 84px;
    height: 28px;
    background: #2B2E39;
    border-radius: 6px;
    display: flex;
}
.left{
    flex: 1;
}
.right{
    width: 26px;
}
.up_control{
    height: 50%;
    display: flex;
    justify-content: center;
    position: relative;
    &:hover{
        cursor: pointer;
        .up_triangle{
            border-bottom-color: #00A289;
        }
    }
}
.down_control{
    height: 50%;
    display: flex;
    justify-content: center;
    position: relative;
    &:hover{
        cursor: pointer;
        .down_triangle{
            border-top-color: #00A289;
        }
    }
}
// .triangle{
//     width: 0px;
//     height: 0px;
//     border: 5px solid #00A289;
//     border-left-color: transparent;
//     border-top-color: transparent;
//     border-bottom-color: transparent
// }
.up_triangle{
    position: absolute;
    top: 0;
    width: 0px;
    height: 0px;
    border: 5px solid #898C9A;
    border-left-color: transparent;
    border-right-color: transparent;
    border-top-color: transparent
}

.down_triangle{
    position: absolute;
    bottom: 0;
    width: 0px;
    height: 0px;
    border: 5px solid #898C9A;
    border-left-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent
}

.line{
    width: 1px;
    height: 100%;
    background: rgba(178,181,199,0.14);;
}
::v-deep .el-input__inner{
    background-color: #2B2E39;
}
</style>